<template>
  <div class="select-seat">
    <div id="main" style="width: 100%; height: 1000px;"></div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, onMounted } from 'vue';
import * as echarts from 'echarts';
import $ from 'jquery';

export default defineComponent({
  name: 'SelectSeat',
  props: {
    selected: {
      required: true,
    },
  },
  setup(props, context) {
    //methods
    const echartInit = () => {
      var myChart = echarts.init(document.getElementById('main'), null, {
        renderer: 'svg',
      });
      var ROOT_PATH =
        'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

      var option;

      $.get(ROOT_PATH + '/data/asset/geo/flight-seats.svg', function(svg) {
        echarts.registerMap('flight-seats', { svg: svg });

        var takenSeatNames = ['26E', '26D', '26C', '25D', '23C', '21A', '20F'];

        option = {
          tooltip: {},
          geo: {
            map: 'flight-seats',
            roam: true,
            selectedMode: 'multiple',
            layoutCenter: ['50%', '40%'],
            layoutSize: '180%',
            tooltip: {
              show: true,
            },
            itemStyle: {
              color: '#fff',
            },
            emphasis: {
              itemStyle: {
                color: null,
                borderColor: 'green',
                borderWidth: 2,
              },
              label: {
                show: false,
              },
            },
            select: {
              itemStyle: {
                color: 'green',
              },
              label: {
                show: false,
                textBorderColor: '#fff',
                textBorderWidth: 2,
              },
            },
            regions: makeTakenRegions(takenSeatNames),
          },
        };

        function makeTakenRegions(takenSeatNames) {
          var regions = [];
          for (var i = 0; i < takenSeatNames.length; i++) {
            regions.push({
              name: takenSeatNames[i],
              silent: true,
              itemStyle: {
                color: '#bf0e08',
              },
              emphasis: {
                itemStyle: {
                  borderColor: '#aaa',
                  borderWidth: 1,
                },
              },
              select: {
                itemStyle: {
                  color: '#bf0e08',
                },
              },
            });
          }
          return regions;
        }

        myChart.setOption(option);

        // Get selected seats.
        myChart.on('geoselectchanged', function(params) {
          var selectedNames = params.allSelected[0].name.slice();

          // Remove taken seats.
          for (var i = selectedNames.length - 1; i >= 0; i--) {
            if (takenSeatNames.indexOf(selectedNames[i]) >= 0) {
              selectedNames.splice(i, 1);
            }
          }
          console.log('selected', selectedNames);
          context.emit('update:selected', selectedNames);
        });
      });

      option && myChart.setOption(option);
    };
    //onMounted
    onMounted(() => {
      echartInit();
    });
    //return
    return {
      echartInit,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
</style>
